//调用函数，判断是否有token
checkLogin()

//渲染用户名
renderUsername()

//退出登录
logout()

// const token = localStorage.getItem('token')
// console.log(token)
//获取学生列表
async function renderStudentList() {
    const res = await axios({
        url: '/students',
        method: 'GET',
        /* headers: {
            Authorization: token
        } */
    })
    // console.log(res.data)
    document.querySelector('.total').innerHTML = res.data.length
    const str = res.data.map((item) => {
        // console.log(item)
        const {
            id,
            user_id,
            name,
            age,
            gender,
            area,
            city,
            createdAt,
            group,
            hope_salary,
            province,
            salary,
            updatedAt
        } = item
        return `
        <tr>
    <td>${name}</td>
    <td>${age}</td>
    <td>${gender==0?'男':'女'}</td>
    <td>第${group}组</td>
    <td>${hope_salary}</td>
    <td>${salary}</td>
    <td>${province+city+area}</td>
    <td data-id=${id}>
      <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
       <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
     </td>
</tr> 
        `
    }).join('')
    document.querySelector('.list').innerHTML = str
}
renderStudentList()


//删除和编辑都要事件委托list
document.querySelector('.list').addEventListener('click', function (e) {
    //id保存删除按钮的父级的父级的dataset
    const id = e.target.parentNode.parentNode.dataset.id
    //如果包含bi-trash类名执行删除功能 - 函数
    if (e.target.classList.contains('bi-trash')) {
        delStudent(id)
        // console.log(1111)
    }
    // 如果包含bi-pen类名执行编辑功能 - 函数
    if (e.target.classList.contains('bi-pen')) {
        editStudent(id)
        //把id保存到弹窗上面
        modalDom.dataset.id = id
        // console.log(id)
    }
})

//显示弹窗→表单的值 发请求做回显
async function editStudent(id) {
    modal.show()
    document.querySelector('.modal-title').innerHTML = '修改学员'
    const res = await axios.get(`/students/${id}`) //请求到数据

    //直接修改value回显
    const arr = ['name', 'age', 'hope_salary', 'salary', 'group']
    arr.forEach((item) => {
        document.querySelector(`[name=${item}]`).value = res.data[item]
    })

    //性别-男第一个圈，索引0表示；女第二个圈，索引1表示 → 后端数据 → checked=true就是选中状态
    const {
        gender
    } = res.data
    const cks = document.querySelectorAll('[name=gender]')
    // cks[索引].checked =true
    cks[gender].checked = true

    /* const gd = document.querySelectorAll('[name=gender]')[gender]
     // console.log(number)
     gd.value == 0 ? gd.checked = true : '' */

    //省市区：数据直接回显；请求新的市、区
    const {
        province,
        city,
        area
    } = res.data
    proSelect.value = province

    const cityRes = await axios.get('/api/city', {
        params: {
            pname: province
        }
    })
    citySelect.innerHTML = '<option value="">--省份--</option>' + cityRes.list.map((item) => {
        return `<option value="${item}">${item}</option>`
    }).join('')
    citySelect.value = city

    const areaRes = await axios.get('/api/area', {
        params: {
            pname: province,
            cname: city
        }
    })
    areaSelect.innerHTML = '<option value="">--地区--</option>' + areaRes.list.map((item) => {
        return `<option value="${item}">${item}</option>`
    }).join('')
    areaSelect.value = area
}



//函数 - 删除学生 - 按id删除 → 重新渲染 → 额外：弹窗确认
async function delStudent(id) {
    //弹窗让用户确认
    const con = confirm('确定要删除吗？')
    if (con) {
        await axios.delete(`/students/${id}`)
        showToast('删除成功')
        renderStudentList()
    }
}

// 显示弹框
//找弹窗标签
const modalDom = document.querySelector('#modal')
//创建弹窗对象
const modal = new bootstrap.Modal(modalDom)

//添加
document.querySelector('#openModal').addEventListener('click', function () {
    modal.show()
    document.querySelector('.modal-title').innerHTML = '添加学员'
    citySelect.innerHTML = '<option value="">--城市--</option>'
    areaSelect.innerHTML = '<option value="">--地区--</option>'
    form.reset()
    // 省市区三级联动
    // initSelect()
})

// 省市区三级联动
initSelect()

//省市区三级联动的函数 → 代码多；省份的列表在编辑的时候也需要
// document.querySelector('[属性名 = 属性值]')  ----属性选择器
const proSelect = document.querySelector('[name=province]')
const citySelect = document.querySelector('[name=city]')
const areaSelect = document.querySelector('[name=area]')
async function initSelect() {
    //默认请求省份
    const proRes = await axios.get('/api/province')
    proSelect.innerHTML = '<option value="">--省份--</option>' + proRes.list.map((item) => {
        return `<option value="${item}">${item}</option>`
    }).join('')
    //当省份列表值变化了（value，事件change），发请求城市，渲染城市下拉
    proSelect.addEventListener('change', async function () {
        // console.log(proSelect.value)
        const cityRes = await axios.get('/api/city', {
            params: {
                pname: proSelect.value
            }
        })
        // console.log(cityRes)
        citySelect.innerHTML = '<option value="">--城市--</option>' + cityRes.list.map((item) => {
            return `<option value="${item}">${item}</option>`
        }).join('')
        //清空地区数据
        areaSelect.innerHTML = `<option value="">--地区--</option>`
    })
    //当城市列表值变化了，发请求区县，渲染区县下拉
    citySelect.addEventListener('change', async function () {
        const areaRes = await axios.get('/api/area', {
            params: {
                pname: proSelect.value,
                cname: citySelect.value
            }
        })
        areaSelect.innerHTML = '<option value="">--地区--</option>' + areaRes.list.map((item) => {
            return `<option value="${item}">${item}</option>`
        }).join('')
    })
}

//弹窗里面的确认按钮点击：判断 - 添加 - 编辑
// 有id表示编辑，没有id表示要添加
// 1.编辑时候的id变全局变量
// 2.把编辑时候的id保存到弹窗上面，如果弹窗上面有id则表示编辑
document.querySelector('#submit').addEventListener('click', function () {
    // addStudent()
    if (modalDom.dataset.id) {
        //向后端发请求，保存编辑数据
        // console.log('编辑数据')
        saveStudent()
    } else {
        addStudent()
    }
})


//编辑功能函数
async function saveStudent() {
    //发用户输入的所有数据到后端接口 → 把新的学生渲染 → 弹窗关掉
    const data = serialize(form, {
        hash: true,
        empty: true
    })

    const id = modalDom.dataset.id
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary

    const res = await axios.put(`/students/${id}`, data)
    showToast(res.message)
    renderStudentList()
    modal.hide()
    // form.reset()
    modalDom.dataset.id = ''
    // console.log(res)
}




//收集数据
const form = document.querySelector('#form')

// 添加功能函数：收集数据 → 发送到后台接口 → 渲染新数据
async function addStudent() {
    const data = serialize(form, {
        hash: true,
        empty: true
    })
    // console.log(data)
    data.age = +data.age
    data.gender = +data.gender
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    const res = await axios.post('/students', data)
    console.log(res)
    showToast(res.message)
    renderStudentList()
    modal.hide()
}





//收集数据
// const data = serialize(document.querySelector('.list'), {
//     hash: true,
//     empty: true
// })
// console.log(data)